<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
  <div class="execution">
    <!--添加tab切换栏-->
    <template>
      <!-- <el-tabs v-model="activeName" @tab-click="handleClick" class="tabContent">
        <el-tab-pane label="订单详情" name="orderDetail"> -->
      <!--切换订单详情显示的内容-->

      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><router-link to="/reporting/salesDay">销量上报管理</router-link></el-breadcrumb-item>
          <el-breadcrumb-item>销量上报详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <basic-container>
        <h2 class="io-goods-detail">
          基础信息
        </h2>
        <template>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple">单号：{{ topData.reportSn }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">客户编号：{{ topData.customerSn }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div>客户：{{ topData.customerName }}</el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div>销售日期:{{ topData.reportDate }}</el-col>
          </el-row>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple-light">其它金额：{{ topData.otherAmount }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">商品合计金额：{{ topData.goodsTotalAmount }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">总计金额：{{ topData.totalAmount }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">优惠金额：{{ topData.couponAmount }}</div></el-col>
          </el-row>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple-light">上报人：{{ topData.reportMan }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">上报位置：{{ topData.reportAddress }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">上报状态：{{ topData.reportStatus }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">上报时间：{{ topData.createDate }}</div></el-col>
          </el-row>
          <el-row :gutter="20" class="common-height">
            <el-col :span="6"><div class="grid-content bg-purple-light">备注：{{ topData.remarks }}</div></el-col>
            <el-col :span="18">
              <div class="grid-content bg-purple text-left flex">
                <div>拜访图片：</div>
                <div v-for="(item,index) in topData.photoList" v-if="topData.photoList" :key="index" class="thumbUrl m-l">
                  <el-image
                    :src="item.picUrl"
                    :preview-src-list="[item.picUrl]"
                    style="width: 100px; height: 100px"/>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row >
            <div v-show="reportStatus==='0'" style="display: inline">
              <el-button type="primary" plain @click="reportReview">审核确认</el-button>
            </div>
          </el-row>
        </template>
      </basic-container>
      <basic-container>
        <h2 class="io-goods-detail">
          销售上报商品清单
        </h2>
        <template>
          <el-table
            :data="tableData"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            style="width: 100%">
            <el-table-column label="序号" prop="id" align="center" type="index"></el-table-column>
            <el-table-column label="销售商品类型" prop="goodsType" align="center"></el-table-column>
            <el-table-column label="商品图片" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.goodsImg" height="50px"/>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
            <el-table-column label="商品规格" prop="modelAttr" align="center"></el-table-column>
            <el-table-column label="单位" prop="goodsUnit" align="center"></el-table-column>
            <el-table-column label="订单数量" prop="goodsNum" align="center"></el-table-column>
            <el-table-column label="商品价格" prop="tradePrice" align="center"></el-table-column>
            <el-table-column label="金额" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.goodsNum * scope.row.tradePrice }}</span>
              </template>
            </el-table-column>
            <el-table-column label="有效期" width="150px" prop="expiration" align="center"></el-table-column>
            <el-table-column label="生产日期" width="160px" prop="productTime" align="center"></el-table-column>
            <el-table-column label="到期日期" width="160px" prop="maturityTime" align="center"></el-table-column>
            <!-- <el-table-column label="商品种类" prop="modelAttr" align="center"></el-table-column>
                <el-table-column label="客户名称" prop="customerName" align="center"> -->
            <!--                </el-table-column>-->
            <el-table-column label="备注" prop="remarks" align="center"></el-table-column>
          </el-table>
        </template>
      </basic-container>
      <basic-container>
        <template>
          <div class="return-btn">
            <el-button type="primary" plain @click="goBack">返回</el-button>
          </div>
        </template>
      </basic-container>

      <!-- </el-tab-pane> -->
      <!-- </el-tabs> -->
    </template>
  </div>
</template>
<!-- 采购退货 -->
<script>
import {
  getDetail,
  reportReview
} from '@/api/crm/salesDay'
import {
  mapGetters
} from 'vuex'
import Util from '@/util/pds/utils'
import { fetchDict } from '@/util/util'
import { getStatusName } from '@/const/common/tool'
import { goBack } from "../../../util/util";
const cookieUtil = new Util()
export default {
  name: 'addpurchaseback',
  data() {
    return {
      activeName: 'orderDetail',
      tableData: [],
      topData: {},
      sales_goods_type: [],
      data_report_status: [],
      reportStatus: '',
      customerSn:"",
      reportSn: ""
    }
  },
  // created() {
  //   this.init()
  // },
  computed: {
    ...mapGetters(['permissions'])
  },
  beforeRouteEnter(to, from, next) {
    next(vm => (vm.reportSn = vm.$route.query.res.reportSn,vm.customerSn = vm.$route.query.res.customerSn));
  },
   // 监听属性
  watch: {
    reportSn: function(newValue, oldValue) {
      // 新值为空时使用已有的值
      this.init(oldValue && !newValue ? oldValue : newValue);
    }
  },
  methods: {
    async init(reportSn) {
      if (!reportSn) {
        this.goBack();
        return;
      }
      await fetchDict('scm_sales_goods_type', this.sales_goods_type)
      await fetchDict('scm_data_report_status', this.data_report_status)
      const params = {
        reportSn: reportSn
      }
      getDetail(params).then(async response => {
        this.tableData = response.data.data.detailList
        this.topData = response.data.data
        this.reportStatus = this.topData.reportStatus
        this.topData.reportStatus = getStatusName(this.data_report_status, this.topData.reportStatus)
        this.topData.detailList = getDetailList(this.sales_goods_type, this.topData.detailList)
        this.countCouponAmount()
      })
    },
    getTotalAmount() {
      let totalAmount = 0
      this.tableData && this.tableData.length && this.tableData.map(item => {
        if (item.salesGoodsType !== '3') totalAmount += parseFloat(item.goodsNum * item.tradePrice)
      })
      this.$set(this.topData, 'goodsTotalAmount', totalAmount)
      totalAmount += this.topData.otherAmount
      return totalAmount
    },
    // 计算优惠价格
    countCouponAmount() {
      const couponAmount = this.getTotalAmount() - this.topData.totalAmount
      this.$set(this.topData, 'couponAmount', couponAmount)
    },
    // 返回按钮
    goBack(time = 1000) {
      goBack(this, time);

    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    reportReview() {
      const _this = this
      const reportSn = this.topData.reportSn
      this.$confirm('是否确认销量上报单号' + reportSn + '的上报数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        const params = {
          reportSn: reportSn
        }
        reportReview(params).then(response => {
          if (response.data.code === 0 && response.data.data) {
            _this.$message({
              showClose: true,
              message: '确认成功',
              type: 'success'
            })
            _this.reportStatus = '1'
          }
        })
      }).catch(function(err) {
      })
    }
  }
}
function getDetailList(typeList, dataList) {
  if (!Array.isArray(dataList)) return []
  dataList = dataList.map(item => {
    item['goodsType'] = getStatusName(typeList, item.salesGoodsType)
    return item
  })
  return dataList
}
</script>

<style lang="scss">
  .crumbs{
    margin: 20px 10px;
  }
  .thumbUrl {
    display: inline-block;
  }
  .io-goods-detail{
    margin-bottom: 10px;
  }
  .settle-accounts{
    text-align: right;
  }
  .basic-information {
    margin-top: 20px;
    font-weight: inherit;
  }
  .return-btn{
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
  }
  .tabContent{
    padding-left: 10px;
    .el-tabs__item{
      font-size: 20px;
    }
  }
</style>
